﻿@page "/datagrid/custom-command"

@using Syncfusion.Blazor.Grids;
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@using Syncfusion.Blazor.Popups;

<SampleDescription>
    <p>
        This sample demonstrates the <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/editing/#custom-command'>custom command  </a>button column in the DataGrid.
    </p>
</SampleDescription>

<ActionDescription>
    <p>
        Custom command button can be added in the column by specifying the type property of the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CommandButtonType.html'>GridCommandColumn.</a>
        component as <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CommandButtonType.html'>CommandButtonType.None. </a>The <b>CommandClicked </b> event can be used to capture the end-user clicks and corresponding row details can be accessed using
        <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CommandClickEventArgs-1.html'>CommandClickEventArg</a>.
    </p>

    <p>
        In this demo, the following changes had been made in the DataGrid to use a custom command button in a column.
        <ul>
            <li>Added a column named View Details and command button configurations given using <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumn.html'> GridCommandColumn</a>.</li>
            <li><b> CommandClicked</b> event is used to capture user clicks.</li>
            <li>Used the <a href='https://blazor.syncfusion.com/documentation/dialog/getting-started/'> SfDialog </a>in viewing the user details</li>.
        </ul>
        Now, click the View icon in the View Details column to see  additional information about the particular row.
    </p>

    <p>
        More information on the custom command can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/editing/#custom-command'>documentation section</a>.
    </p>

</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid ID="MyGrid" @ref="Grid" DataSource="EmployeeList" AllowSelection="true">

                <GridEvents CommandClicked="OnCommandClicked" TValue="EmployeeData"> </GridEvents>
                <GridColumns>
                    <GridColumn Field="@nameof(EmployeeData.EmployeeId)" HeaderText="Employee ID" TextAlign="TextAlign.Right"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeData.FirstName)" HeaderText="First Name" TextAlign="TextAlign.Left"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeData.LastName)" HeaderText="Last Name" TextAlign="TextAlign.Left"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeData.HireDate)" HeaderText="Hire Date" TextAlign="TextAlign.Right" Format="d"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeData.Country)" HeaderText="Country" TextAlign="TextAlign.Left"></GridColumn>
                    <GridColumn HeaderText="View Details" TextAlign="TextAlign.Center" Width="150">

                        <GridCommandColumns>
                            <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { CssClass="e-icons e-view-details"})" Title="View"></GridCommandColumn>
                        </GridCommandColumns>

                    </GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>


<SfDialog Width="auto" @bind-Visible="@IsVisible" ShowCloseIcon="true" IsModal="false" Target="#MyGrid">
    <DialogTemplates>
        <Header> Employee Information  </Header>
        <Content>
            @{
                <div style="display:inline-flex">
                    @if (RowDetails != null)
                    {
                        <div style="float:left;padding:45px;padding-top:70px"><img class="photo" src="@UriHelper.ToAbsoluteUri($"images/data-grid/{RowDetails?.EmployeeId}.png")" alt="@RowDetails?.EmployeeId" /></div>
                    }
                    <div style="padding-top:42px">
                        <div style="padding-bottom:10px;padding-left:10px;">
                            <span style="font-size:large;font-weight: bold">@RowDetails?.FirstName @RowDetails?.LastName</span>
                        </div>
                        <div>
                            <span class="position">@RowDetails?.Title</span>
                        </div>
                        <div style="padding-top:10px;">
                            <table class="table">
                                <tr>
                                    <th>Birth Date </th>
                                    <td>@RowDetails?.BirthDate?.ToString("dd/MM/yyyy")</td>
                                </tr>
                                <tr>
                                    <th>City </th>
                                    <td>@RowDetails?.City</td>
                                </tr>
                                <tr>
                                    <th>Postal Code </th>
                                    <td>@RowDetails?.Code</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

            }
        </Content>
    </DialogTemplates>
    <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
</SfDialog>

<style>

    .table {
        display: table;
        border-collapse: separate;
        border-spacing: 10px;
        font-size: medium;
        text-align: left;
    }

    .position {
        background: #E0E0E0;
        border-radius: 13px;
        text-align: center;
        font-size: 13px;
        padding-top: 10px;
        width: 165px;
        height: 28px;
        padding: 8px 16px;
    }

    .photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        border: 2px solid #CBCBCB;
    }

    .styleDialog {
        margin-top: 4px;
    }

    .e-view-details::before {
        content: '\e787';
    }    
</style>

@code
{
    SfGrid<EmployeeData> Grid;
    List<EmployeeData> EmployeeList;
    public bool IsVisible { get; set; } = false;
    public EmployeeData RowDetails { get; set; }
    private string Xvalue = "center";
    private string Yvalue = "center";

    public void OnCommandClicked(CommandClickEventArgs<EmployeeData> args)
    {
        RowDetails = args.RowData;
        IsVisible = true;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        EmployeeList = new List<EmployeeData>();
        EmployeeList.Add(new EmployeeData() { FirstName = "Nancy", LastName = "Davolio", HireDate = new DateTime(1992, 01, 05), Country = "USA", City = "Seattle", EmployeeId = 1, Title = "Sales Representative", Code = 98122, BirthDate = new DateTime(1948, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Andrew", LastName = "Fuller", HireDate = new DateTime(1993, 03, 08), Country = "USA", City = "Tacoma", EmployeeId = 2, Title = "Vice President, Sales ", Code = 98711, BirthDate = new DateTime(1950, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Janet", LastName = "Leverling", HireDate = new DateTime(1992, 11, 04), Country = "UK", City = "Kirkland", EmployeeId = 3, Title = "Sales Representative", Code = 97122, BirthDate = new DateTime(1949, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Steven", LastName = "Peacock", HireDate = new DateTime(1992, 05, 05), Country = "USA", City = "Redmond", EmployeeId = 4, Title = "Sales Representative", Code = 96221, BirthDate = new DateTime(1948, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Margaret", LastName = "Buchanan", HireDate = new DateTime(1993, 07, 05), Country = "UK", City = "London", EmployeeId = 5, Title = "Sales Manager", Code = 98321, BirthDate = new DateTime(1949, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Micheal", LastName = "Suyama", HireDate = new DateTime(1993, 08, 05), Country = "UK", City = "London", EmployeeId = 6, Title = "Sales Representative", Code = 98321, BirthDate = new DateTime(1950, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Robert", LastName = "King", HireDate = new DateTime(1993, 09, 05), Country = "USA", City = "London", EmployeeId = 7, Title = "Sales Representative", Code = 98321, BirthDate = new DateTime(1950, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Laura", LastName = "Callahan", HireDate = new DateTime(1993, 10, 05), Country = "UK", City = "Seattle", EmployeeId = 8, Title = "Inside Sales Coordinator", Code = 98321, BirthDate = new DateTime(1948, 01, 05) });
        EmployeeList.Add(new EmployeeData() { FirstName = "Anne", LastName = "Dodsworth", HireDate = new DateTime(1993, 11, 05), Country = "USA", City = "London", EmployeeId = 9, Title = "Sales Representative", Code = 98321, BirthDate = new DateTime(1947, 01, 05) });
    }

    public class EmployeeData
    {
        public int? EmployeeId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime? HireDate { get; set; }
        public string Country { get; set; }
        public string Title { get; set; }
        public string City { get; set; }
        public int Code { get; set; }
        public DateTime? BirthDate { get; set; }
    }

}
